<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/web/resources/js/member/member_join.js"></script>
<title>조립PC의 대명사- PC Master~!~!</title>
<script>
	window.onload =function(){
		var yearValue = 2013;
		var objYear = document.getElementById("year");
			//년 자동 셀렉트
			for(var i = 0; i < objYear.length; i++){
				if(yearValue == objYear[i].value){
					objYear[i].selected = true;
				}
			}
		document.joinForm.member_address1.readOnly=true;
		document.joinForm.zip1.readOnly=true;
		document.joinForm.zip2.readOnly=true;
	}


</script>

</head>
<body>

<!-- 상단 로그인 패널을 include로 삽입 -->
<div style="position:absolute; left:50%; top:0px; width:1200px; height:80px; margin-left:-600px;z-index:1 ">
<%@ include file="../loginPanel.jsp" %>
</div>

<!-- 상단 및 좌측 메뉴(카테고리)리스트를 include로 삽입 -->
<div style="position:absolute; left:50%; top:0px; width:1200px; height:80px; margin-left:-600px;">
<%@ include file="../top.jsp" %>
</div>

<div style="position:absolute; left:50%; top:160px; width:1000px; height:80px; margin-left:-400px;">
<!--------------------------------------여기다가 각자 삽입------------------------------------>
<form name="joinForm" action="/web/member/join" method="post">
	<!-- 히든 타입-->
	<input type="hidden" name="member_birth" />
	<input type="hidden" name="member_phone" />
	<input type="hidden" name="member_handphone" />
	<input type="hidden" name="member_zipcode" />
	<input type="hidden" name="member_email" />
	<!-- 히든 타입 끝 -->
	<!-- 타이틀 -->
	<table style="margin-left: 30px; margin-top:30px" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td><img src="/web/resources/images/bar_t_line.gif" border="0" alt="" /></td>
			<td style="color:333333;font-size:14px;font-weight:bold;">회원 가입</td>
		</tr>
	</table>	  
	<!-- 타이틀 끝 -->
	
	
	<table width="1000px" border="0" cellpadding="0" cellspacing="0" style="margin-top:10px;">
	
    <tr>
        <td style="border:1px solid #cdcdcd;padding:3px;">
		<table width="1000px" border="0" align="center" cellpadding="0" cellspacing="0">
		    <tr>
		        <td style="border:1px solid #e6e6e6;padding:16px;">
				<table width="1000px" border="0" align="center" cellpadding="0" cellspacing="0">
				  <tr>
					    
                  <td height="30" style="padding-left:10px;"><img src="/web/resources/images/member/bullet02.gif" border="0" alt="필수항목표시" />&nbsp;
                  	<b>표시된 항목은 필수 항목이므로 꼭 입력하셔야 합니다.</b></td>
					</tr>
					<tr>
					    <td style="padding:10px;">
							<table width="1000px" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<!-- 아이디 -->
							<table cellpadding="0" cellspacing="0" border="0" width="1000px">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">ID</td>
									<td style="padding:5 10 5 20;">
										<input type=text name="member_id" size='12' maxlength='12' style=''/> 
										<input type="button" value="중복확인" onclick="idCheck(this.form)" />
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										ID를 입력해 주세요. (영문 또는 숫자 4~12자 이내)</span>
									</td>
								</tr>
							</table>
							<!-- 아이디 끝-->
							<table width="1000px" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<!-- 비밀번호 -->
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">비밀번호</td>
									<td style="padding:5 10 5 20;">
										<input type=password name="member_password" size='12' maxlength='12' style=''> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
									비밀번호를 입력해 주세요. (영문 또는 숫자 4~12자 이내)</span>
									</td>
								</tr>
							</table>
							<!-- 비밀번호 끝-->
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
										<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
										<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">비밀번호 확인</td>
										<td style="padding:5 10 5 20;">
										<input type=password name="member_repassword" size='12' maxlength='12' style=''> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										비밀번호를 입력해 주세요. (영문 또는 숫자 4~12자 이내)</span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">성명</td>
									<td style="padding:5 10 5 20;">
										<input type=text name="member_name" size='12' maxlength='10' style=''> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										성명을 입력해 주세요.</span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">생년월일</td>
									<td style="padding:5 10 5 20;">
										<select name="year" id="year">											
											<c:forEach begin="1930" end="2013" step="1" var="cnt">
											<option value="${cnt }">${cnt }</option>
											</c:forEach>
										</select>년 
										<select name="month" id="month"	style="width: 44px; height: 23px; font-size: 10pt;">
											<c:forEach begin="1" end="12" step="1" var="cnt">
											<option value="${cnt }">${cnt }</option>
										</c:forEach>
										</select>월 <select name="day" id="day" style="width: 44px; height: 23px; font-size: 10pt;">
											<c:forEach begin="1" end="31" step="1" var="cnt">
											<option value="${cnt }">${cnt }</option>
										</c:forEach>
										</select>일
											<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
											<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
											생년월일을 입력해 주세요.</span>
									</td>										
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">연락처</td>
									<td style="padding:5 10 5 20;">
										<select name="tel1" style="width: 50px; height: 23px; font-size: 10pt;">											
											<c:forEach items="${telcode }" var="code">
											<option value="${code }">${code }</option>
											</c:forEach>
										</select> - 
										<input type=text name="tel2" size='4' maxlength='4' style="ime-mode:disabled;" onkeypress="checkForNumber();"> - 
										<input type=text name="tel3" size='4' maxlength='4' style="ime-mode:disabled;" onkeypress="checkForNumber();"> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										연락가능한 전화번호를 입력해 주세요.</span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">휴대전화</td>
									<td style="padding:5 10 5 20;">
										<select id="phone1" name="phone1" title="휴대폰 첫자리 선택" class="sel_brth2" style="width:50px">
											<option value="010">010</option>
											<option value="011">011</option>
											<option value="016">016</option>
											<option value="017">017</option>
											<option value="018">018</option>
											<option value="019">019</option>
										</select>
										<input type=text name="phone2" title="휴대폰 중간 자리 입력" size='4' maxlength='4' style="ime-mode:disabled;" onkeypress="checkForNumber();"> - 
										<input type=text name="phone3" title="휴대폰 끝 자리 입력" size='4' maxlength='4' style="ime-mode:disabled;" onkeypress="checkForNumber();"> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										휴대폰번호를 입력해 주세요.</span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">이메일</td>
									<td style="padding:5 10 5 20;">
										<input type="text" name="email1" size="12" maxlength="20"/> @ 
										<input type="text" name="email2" id="email2" size="12"/>			
										<select name="email3" id="email3" onChange="changeMail()" style="width: 100px; height: 23px; font-size: 10pt;">
											<option value="" >직접입력</option>
											<c:forEach items="${emailcode }" var="code">
											<option value="${code }">${code }</option>			
											</c:forEach>
										</select>
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										한메일(다음) 계정은 피해주세요.</span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">자택주소</td>
									<td style="padding:5 10 5 20;">
										<input type="text" size="3" id="zip1" name="zip1" onclick="addressClick(this.form)"/> - 
										<input type="text" size="3" id="zip2" name="zip2"  onclick="addressClick(this.form)"/> 
										<input type="button" value="우편번호찾기" onclick="checkZipcode(this.form)"/>
										<br>
										<input type=text id="add1" name="member_address1" size='40' maxlength='255' style='' 
											onclick="addressClick(this.form)"><br>
										<input type=text id="add2" name="member_address2" size='40' maxlength='255' style=''> 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										자택주소를 입력해 주세요. </span>
									</td>
								</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">메일링</td>
									<td style="padding:5 10 5 20;">
										<input type=radio value="1" name="member_emailyn" style='border:0;' checked> 가입
										<input type=radio value="2" name="member_emailyn" style='border:0;'> 가입안함 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										메일링 가입여부를 선택해 주세요. </span></td>
									</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>
							<table cellpadding="0" cellspacing="0" border="0" width="100%">
								<tr>
									<td width="15" bgcolor="#eeeeee" height="30" align=center><img src='/web/resources/images/member/bullet02.gif'></td>
									<td width="140" bgcolor="#eeeeee" height="30" style="padding-left:5px;font-family:dotum;font-size:11px;color:#6d6d6d;font-weight:bold;">SMS</td>
									<td style="padding:5 10 5 20;">
										<input type=radio value="1" name="member_smsyn" style='border:0;' checked> 가입
										<input type=radio value="2" name="member_smsyn" style='border:0;'> 가입안함 
										<img src="/web/resources/images/member/bullet03.gif" border="0" alt="" /> 
										<span style="font-family:dotum;font-size:11px;color:#838383;letter-spacing:-1px;">
										SMS 수신여부를 선택해 주세요. </span></td>
									</tr>
							</table>
							<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
								<tr>
									<td height="1" bgcolor="#d6ddd5"></td>
								</tr>
							</table>							
						</td>
					</tr>
				</table>
				</td>
		    </tr>
		</table>
		</td>
    </tr>
	<tr>
		<td align="center">
		<table border="0" cellspacing="0" cellpadding="0" style="margin-top:15px;">
			<tr>
				<td>
					<input type="button" value="회원가입" onClick="joinCheck()"/>
				</td>
			<td width="10"></td>				
            <td>
            	<input type="button" value="취소" onClick="location.href='/web/'"/>
            </td>
			</tr>
		</table>
		</td>
	</tr>
</table>
</form>
<script>
document.joinForm.member_id.focus();
</script>
	
	
	
	
	
	
	
	
	
	
	
	
	
	
<!--------------------------------------   삽입 끝       ------------------------------------>
</div> 

<!-- 하단 이용약관, 고객센터, 회사정보 등의 정보를 include로 삽입 -->
<div style="position:absolute; left:0; top:1200px; width:100%; height:80px; ">
<%@ include file="../bottom.jsp"%>
</div>
</body>
</html>